﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>VSCode编辑器 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 VSCode编辑器" />
    <meta name="description" content="Script Services Monaco Editor 编辑器" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="Monaco Editor 编辑器">
                                    <svg class="titleicon"><use xlink:href="#vsc"></use></svg> VSCode&#x7F16;&#x8F91;&#x5668;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="input-group-append">
                    <select class="custom-select" id="setheme">
                        <optgroup label="Theme">
                            <option value="vs">vs</option>
                            <option value="vs-dark">vs-dark</option>
                            <option value="hc-black">hc-black</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <select class="custom-select" id="selanguage">
                        <optgroup label="Language"></optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-warning d-none" id="btnRun" title="运行全局对象：window.ee">运行</button>
                </div>
                <div class="input-group-prepend pt-2 pl-3 text-muted">
                    自动保存，可拖拽文件打开
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-12">
            <div id="editor" class="border overflow-hidden position-relative">
                <i class="fa fa-arrows-alt fa-fw me-full-btn" title="Switch the full screen"></i>
            </div>
        </div>
    </div>
</div>

<script>
    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    AutoHeight();
</script>

<script src='https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>
                        


<script>
    var editor,
        defaultLang = ss.lsStr("vscode-lang") || 'javascript',
        defaultContent = ss.lsStr("vscode-content") || 'console.log("Hello world!");',
        defaultTheme = ss.lsStr("vscode-theme") || 'vs';

    require(['vs/editor/editor.main'], function () {
        var modesIds = monaco.languages.getLanguages().map(lang => lang.id).sort();

        var te = $("#editor"), selang = $('#selanguage'),
            languagehtm = [];
        for (var i = 0; i < modesIds.length; i++) {
            var mo = modesIds[i];
            languagehtm.push('<option>' + mo + '</option>');
        }
        selang.children()[0].innerHTML = languagehtm.join('');

        editor = monaco.editor.create(te[0], ss.meConfig({
            value: defaultContent,
            language: defaultLang,
            theme: defaultTheme
        }));

        selang.change(function () {
            var oldModel = editor.getModel();
            var newModel = monaco.editor.createModel(editor.getValue(), this.value);
            editor.setModel(newModel);
            if (oldModel) {
                oldModel.dispose();
            }
            ss.ls["vscode-lang"] = this.value;
            ss.lsSave();

            if (this.value == "javascript") {
                $('#btnRun').removeClass('d-none');
            } else {
                $('#btnRun').addClass('d-none');
            }
        }).val(defaultLang);
        if (defaultLang == "javascript") {
            $('#btnRun').removeClass('d-none');
        } else {
            $('#btnRun').addClass('d-none');
        }

        $('#setheme').change(function () {
            monaco.editor.setTheme(this.value);
            ss.ls["vscode-theme"] = this.value;
            ss.lsSave();
        }).val(defaultTheme);

        editor.onDidChangeModelContent(function (e) {
            clearTimeout(window.defer1);
            window.defer1 = setTimeout(function () {
                ss.ls["vscode-content"] = editor.getValue();
                ss.lsSave();
            }, 1000 * 1)
        });

        editor.addCommand(monaco.KeyCode.PauseBreak, function () {
            $('#btnRun')[0].click();
        })
    });

    $('#btnRun').click(function () {
        switch (editor.getModel()._languageIdentifier.language) {
            case "javascript":
                try {
                    window.ee = new Function(editor.getValue());
                    ee();
                } catch (e) {
                    console.error(e);
                }
                break;
        }
    });

    //接收文件
    ss.receiveFiles(function (files) {
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            editor.setValue(e.target.result);
        };
        reader.readAsText(file);
    });

    $(window).resize(AutoHeight);
</script>
        </div>
</body>
</html>
